<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
    * {
      padding: 0px;
      margin: 0px;
    }

    body {
      background: #ccc;
    }

    .wrap {
      width: 500px;
      height: 300px;
      background: #fff;
      position: absolute;
      left: 300px;
      top: 100px;
      min-width: 200px;
      min-height: 230px;
      box-sizing: border-box;
      box-shadow: 2px 2px 5px #000;
      border-radius: 4px;
      overflow: hidden;
    }

    .wrap div.title {
      height: 30px;
      border-bottom: 1px solid #ccc;
      background: skyblue;
      text-indent: 1em;
      line-height: 30px;
      color: #fff;
      user-select: none;
    }

    .wrap div.title:hover {
      cursor: move;
    }

    .wrap div#info {
      overflow-y: scroll;
      max-height: calc(100% - 32px);
    }

    #info.scrollbar::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
      background-color: #F5F5F5;
      border-radius: 10px;
    }

    #info.scrollbar::-webkit-scrollbar {
      width: 10px;
      background-color: #F5F5F5;
    }

    #info.scrollbar::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background-color: #FFF;
      background-image: -webkit-gradient(linear,
          40% 0%,
          75% 84%,
          from(#4D9C41),
          to(#19911D),
          color-stop(.6, #54DE5D))
    }

    .left,
    .right {
      display: block;
      width: 2px;
      height: 100%;
      position: absolute;
      top: 0px;
      cursor: e-resize;
    }

    .right {
      right: 0px;
    }

    .up,
    .down {
      display: block;
      width: 100%;
      height: 2px;
      position: absolute;
      left: 0px;
      cursor: n-resize;
    }

    .up {
      top: 0px;
    }

    .down {
      bottom: 0px;
    }

    .leftUp,
    .leftDown {
      width: 10px;
      height: 10px;
      position: absolute;
      left: 0px;
      /*background: yellow;*/
      z-index: 10;
    }

    .leftUp,
    .rightUp {
      top: 0px;
    }

    .leftDown:hover,
    .rightUp:hover {
      cursor: ne-resize;
    }

    .leftUp,
    .rightDown {
      cursor: nw-resize;
    }

    .leftDown,
    .rightDown {
      bottom: 0px
    }

    .rightUp,
    .rightDown {
      width: 10px;
      height: 10px;
      position: absolute;
      right: 0px;
      /*background: yellow;*/
      z-index: 10;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <div class="title">弹框</div>
    <!--左-->
    <span class="left"></span>
    <!--上-->
    <span class="up"></span>
    <!--右-->
    <span class="right"></span>
    <!--下-->
    <span class="down"></span>
    <!--左上-->
    <span class="leftUp"></span>
    <!--右上-->
    <span class="rightUp"></span>
    <!--右下-->
    <span class="rightDown"></span>
    <!--左下-->
    <span class="leftDown"></span>
    <div id="info" class="scrollbar">
      <div class="content">
        内容<br />
        内容<br />
        内容<br />
        内容<br />
        内容<br />
        内容<br />
        内容<br />
        内容<br />
        内容<br />
        内容<br />
        内容<br />
        内容<br />
        内容<br />
        内容<br />
        内容<br />
        内容<br />
        内容<br />
        内容<br />
        内容<br />
        内容<br />
        内容<br />
        内容<br />
        内容<br />
        内容<br />
        内容<br />
      </div>
    </div>
  </div>
</body>
<script type="text/javascript">
  var wrap = document.querySelector('.wrap');
  var drap = wrap.querySelector('div.title');

  var oLeft = document.querySelector('.left');
  var oRight = document.querySelector('.right');
  var oUp = document.querySelector('.up');
  var oDown = document.querySelector('.down');
  var leftUp = document.querySelector('.leftUp');
  var rightUp = document.querySelector('.rightUp');
  var rightDown = document.querySelector('.rightDown');
  var leftDown = document.querySelector('.leftDown');

  var speedX = 0;
  var speedY = 0;
  var lastX = 0;
  var lastY = 0;
  var elasticTimer = null;

  function mouseup() {
    document.onmouseup = function () {
      document.onmousemove = null;
      document.onmouseup = null;
    }
  }
  //拖拽
  drap.onmousedown = function (ev) {
    var oEvent = ev || event;
    var disX = oEvent.clientX - wrap.offsetLeft;
    var disY = oEvent.clientY - wrap.offsetTop;

    document.onmousemove = function (ev) {
      var oEvent = ev || event;
      var l = oEvent.clientX - disX;
      var t = oEvent.clientY - disY;
      if (l < 0) {
        l = 0;
      }
      if (t < 0) {
        t = 0;
      }
      // if (oEvent.clientY < -10) {
      // 	wrap.style.width = window.innerWidth+'px';
      // 	wrap.style.height = window.innerHeight+'px';
      // }
      if (l > window.innerWidth - wrap.offsetWidth) {
        l = window.innerWidth - wrap.offsetWidth;
      }
      if (t > window.innerHeight - wrap.offsetHeight) {
        t = window.innerHeight - wrap.offsetHeight;
      }
      wrap.style.left = l + 'px';
      wrap.style.top = t + 'px';
      speedX = l - lastX;
      speedY = t - lastY;
      lastX = l;
      lastY = t;
      //document.title = speedX+'|'+speedY;
      return false; // 解決选中文字
    }
    document.onmouseup = function () {
      document.onmousemove = null;
      document.onmouseup = null;
      elastic();
    }
    clearInterval(elasticTimer);
    return false;
  }

  function elastic() {
    clearInterval(elasticTimer);
    var sp = 0.8;
    var L = 0;
    var T = 0;
    elasticTimer = setInterval(function () {
      speedY += 3;
      L = wrap.offsetLeft + speedX;
      T = wrap.offsetTop + speedY;
      if (L < 0) {
        L = 0;
        speedX *= -sp;
      }
      if (L > window.innerWidth - wrap.offsetWidth) {
        L = window.innerWidth - wrap.offsetWidth;
        speedX *= -sp;
      }
      if (T < 0) {
        T = 0;
        speedX *= sp;
        speedY *= -sp;
      }
      if (T > window.innerHeight - wrap.offsetHeight) {
        T = window.innerHeight - wrap.offsetHeight;
        speedX *= sp;
        speedY *= -sp;
      }
      if (Math.abs(speedX) < 1) {
        speedX = 0;
      }
      if (Math.abs(speedY) < 1) {
        speedY = 0;
      }
      if (speedX == 0 && speedY == 0 && T == window.innerHeight - wrap.offsetHeight) {
        clearInterval(elasticTimer);
      }
      wrap.style.left = L + 'px';
      wrap.style.top = T + 'px';
    }, 30);
  }


  // 向左
  oLeft.onmousedown = function (ev) {
    var ev = ev || event;

    var wrapW = wrap.offsetWidth;
    var wrapLeft = wrap.offsetLeft;

    // 鼠标按下时的位置
    var mouseDownX = ev.clientX;

    document.onmousemove = function (ev) {
      var ev = ev || event;
      // 鼠标移动时的位置
      var mouseMoveX = ev.clientX;
      wrap.style.width = wrapW - (mouseMoveX - mouseDownX) + 'px';
      wrap.style.left = wrapLeft + (mouseMoveX - mouseDownX) + 'px';
      return false; // 解決选中文字
    }
    document.onmouseup = function () {
      document.onmousemove = null;
      document.onmouseup = null;
    }
  }
  // 向右
  oRight.onmousedown = function (ev) {
    var ev = ev || event;

    var wrapW = wrap.offsetWidth;
    var wrapLeft = wrap.offsetLeft;

    // 鼠标按下时的位置
    var mouseDownX = ev.clientX;

    document.onmousemove = function (ev) {
      var ev = ev || event;
      // 鼠标移动时的位置
      var mouseMoveX = ev.clientX;

      wrap.style.width = wrapW - (mouseDownX - mouseMoveX) + 'px';
      return false; // 解決选中文字
    }
    document.onmouseup = function () {
      document.onmousemove = null;
      document.onmouseup = null;
    }
  }
  // 向上
  oUp.onmousedown = function (ev) {
    var ev = ev || event;

    var wrapH = wrap.offsetHeight;
    var wrapTop = wrap.offsetTop;

    // 鼠标按下时的位置
    var mouseDownY = ev.clientY;

    document.onmousemove = function (ev) {
      var ev = ev || event;
      // 鼠标移动时的位置
      var mouseMoveY = ev.clientY;

      wrap.style.height = wrapH - (mouseMoveY - mouseDownY) + 'px';
      wrap.style.top = wrapTop + (mouseMoveY - mouseDownY) + 'px';
      return false; // 解決选中文字
    }
    document.onmouseup = function () {
      document.onmousemove = null;
      document.onmouseup = null;
    }
  }
  // 向下
  oDown.onmousedown = function (ev) {
    var ev = ev || event;

    var wrapH = wrap.offsetHeight;
    var wrapTop = wrap.offsetTop;

    // 鼠标按下时的位置
    var mouseDownY = ev.clientY;

    document.onmousemove = function (ev) {
      var ev = ev || event;
      // 鼠标移动时的位置
      var mouseMoveY = ev.clientY;

      wrap.style.height = wrapH - (mouseDownY - mouseMoveY) + 'px';
      return false; // 解決选中文字
    }
    document.onmouseup = function () {
      document.onmousemove = null;
      document.onmouseup = null;
    }
  }
  // 左上
  leftUp.onmousedown = function (ev) {
    var ev = ev || event;

    var wrapW = wrap.offsetWidth;
    var wrapLeft = wrap.offsetLeft;
    var wrapH = wrap.offsetHeight;
    var wrapTop = wrap.offsetTop;

    // 鼠标按下时的位置
    var mouseDownX = ev.clientX;
    var mouseDownY = ev.clientY;

    document.onmousemove = function (ev) {
      var ev = ev || event;
      // 鼠标移动时的位置
      var mouseMoveX = ev.clientX;
      var mouseMoveY = ev.clientY;

      wrap.style.width = wrapW - (mouseMoveX - mouseDownX) + 'px';
      wrap.style.left = wrapLeft + (mouseMoveX - mouseDownX) + 'px';
      wrap.style.height = wrapH - (mouseMoveY - mouseDownY) + 'px';
      wrap.style.top = wrapTop + (mouseMoveY - mouseDownY) + 'px';

      return false; // 解決选中文字
    }
    document.onmouseup = function () {
      document.onmousemove = null;
      document.onmouseup = null;
    }
  }
  // 左下
  leftDown.onmousedown = function (ev) {
    var ev = ev || event;

    var wrapH = wrap.offsetHeight;
    var wrapTop = wrap.offsetTop;
    var wrapW = wrap.offsetWidth;
    var wrapLeft = wrap.offsetLeft;

    // 鼠标按下时的位置
    var mouseDownX = ev.clientX;
    var mouseDownY = ev.clientY;

    document.onmousemove = function (ev) {
      var ev = ev || event;
      // 鼠标移动时的位置
      var mouseMoveY = ev.clientY;
      var mouseMoveX = ev.clientX;

      wrap.style.height = wrapH - (mouseDownY - mouseMoveY) + 'px';

      wrap.style.width = wrapW - (mouseMoveX - mouseDownX) + 'px';
      wrap.style.left = wrapLeft + (mouseMoveX - mouseDownX) + 'px';
      return false; // 解決选中文字
    }
    document.onmouseup = function () {
      document.onmousemove = null;
      document.onmouseup = null;
    }
  }
  // 右上
  rightUp.onmousedown = function (ev) {
    var ev = ev || event;

    var wrapH = wrap.offsetHeight;
    var wrapTop = wrap.offsetTop;
    var wrapW = wrap.offsetWidth;
    var wrapLeft = wrap.offsetLeft;

    // 鼠标按下时的位置
    var mouseDownX = ev.clientX;
    var mouseDownY = ev.clientY;

    document.onmousemove = function (ev) {
      var ev = ev || event;
      // 鼠标移动时的位置
      var mouseMoveY = ev.clientY;
      var mouseMoveX = ev.clientX;

      wrap.style.width = wrapW - (mouseDownX - mouseMoveX) + 'px';
      wrap.style.height = wrapH - (mouseMoveY - mouseDownY) + 'px';
      wrap.style.top = wrapTop + (mouseMoveY - mouseDownY) + 'px';
      return false; // 解決选中文字
    }
    document.onmouseup = function () {
      document.onmousemove = null;
      document.onmouseup = null;
    }
  }
  // 右下
  rightDown.onmousedown = function (ev) {
    var ev = ev || event;

    var wrapW = wrap.offsetWidth;
    var wrapLeft = wrap.offsetLeft;
    var wrapH = wrap.offsetHeight;
    var wrapTop = wrap.offsetTop;

    // 鼠标按下时的位置
    var mouseDownX = ev.clientX;
    var mouseDownY = ev.clientY;

    document.onmousemove = function (ev) {
      var ev = ev || event;
      // 鼠标移动时的位置
      var mouseMoveX = ev.clientX;
      var mouseMoveY = ev.clientY;

      wrap.style.height = wrapH - (mouseDownY - mouseMoveY) + 'px';
      wrap.style.width = wrapW - (mouseDownX - mouseMoveX) + 'px';
      return false; // 解決选中文字
    }
    document.onmouseup = function () {
      document.onmousemove = null;
      document.onmouseup = null;
    }
  }

</script>

</html>